JS设计模式之Facade（外观）模式

概念

Facade模式为更大的代码提供了一个方便的高层次接口，能够隐藏其底层的真是复杂性。
可以把它想成是简化API来展示给其他开发人员。

优缺点

优点

• 简化接口
• 使用者与代码解耦
• 易于使用

缺点

• 存在隐性成本，性能相对差一些

应用

栗子1

jquery框架中的$(el),对外提供一个简单接口，实现各种元素的选取，用户不必手动调用框架内部的各种方法，使用简单，下面提供了简化了的jq DOM选取的实现。

jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
};
        
jQuery.fn = jQuery.prototype = {
    init: function( selector, context, rootjQuery ) {
        var match, elem;

        // HANDLE: $(""), $(null), $(undefined), $(false)
        if ( !selector ) {
            return this;
        }

        // Handle HTML strings
        if ( typeof selector === "string" ) {
        
            ...

        } else if ( selector.nodeType ) {
           
            ...
           
        } else if ( jQuery.isFunction( selector ) ) {
           
           ...
           
        }

        return jQuery.makeArray( selector, this );
        //将一个 HTMLElements 集合转换成对应的数组对内和merge相同可以操作类数组
    }
}

.css()同理

栗子2

这个例子是外观模式和模块模式的组合，对外提供一个更加简单的facade接口。

let module = (function() {
    var _private = {
        i: 5,
        get: function() {
            console.log('current value:' + this.i);
        },
        set: function(val) {
            this.i = val;
        },
        run: function() {
            console.log('running');
        },
        jump: function() {
            console.log('jumping');
        }
    },

    return {
        facade: function(args) {
            _private.set(args.val);
            _private.get();

            if(args.run) {
                _private.run();
            }
        }
    }
}());

module.facade({run: true, value: 10});

参考

《JavaScript设计模式》

JS设计模式系列文章

JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
JS设计模式之Singleton（单例）模式
JS设计模式之Facade（外观）模式